<template>
  <!-- 上传课件弹出框 -->
  <el-dialog :visible.sync="uploadAllDialogVisible" :before-close="handleClose" width="50%" append-to-body
             :title="`选择上传${name}`">
    <div class="learn-drawer-title">
      <el-form>
        <el-form-item label="" prop="coverUrl">
          <uploader type="image" ref="upload" :multi="true" @uploaded="imageUploaded"
                    :fileList="dataForm.imgUrl"></uploader>
          <span>注:图片仅支持jpg/png/jpeg，不可大于2MB</span>
        </el-form-item>
        <el-form-item label="" prop="coverUrl">
          <uploader type="video" ref="upload" :multi="true" @uploaded="videoUploaded"
                    :fileList="dataForm.videoUrl"></uploader>
          <span>注:视频仅支持mp4，不可大于600MB</span>
        </el-form-item>
        <el-form-item label="" prop="coverUrl">
          <uploader type="file" ref="upload" :multi="true" @uploaded="fileUploaded"
                    :fileList="dataForm.fileUrl"></uploader>
          <span>注:文件仅支持doc/xls/ppt/pdf/docx/xlsx/pptx，不可大于20MB</span>
        </el-form-item>
        <el-form-item label="" prop="coverUrl">
          <el-button @click="wellOk">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import Vue from 'vue'
  import Uploader from '@/components/uploader'

  export default {
    name: 'uploadAll',
    data() {
      return {
        dataForm: {
          imgUrl: [],
          multi: true,
          videoUrl: [],
          fileUrl: []
        },
        id: '',
        img: [],
        name: '',
        uploadAllDialogVisible: false,
        dataTable: [],
        actionImg: this.$http.adornUrl('/sys/oss/upload?token=') + Vue.cookie.get('token'),
        loading: '',
        noReady: '',
        coverUrl: '',
        noFail: '',
        noUploading: '',
        sort: 0
      }
    },
    props: ['setUploadAll'],
    computed: {
      isSubmit: function () {
        return this.dataTable.length === 0
      }
    },
    // comments: {
    //   Uploader
    // },
    components: {
      Uploader
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      },
      init(id) {
        this.id = id
        this.sort = 0
        this.name = name || '课件'
        this.uploadAllDialogVisible = true
        // this.dataTable = []
        this.dataForm.imgUrl = []
        this.dataForm.videoUrl = []
        this.dataForm.fileUrl = []
        this.loading = ''
        this.noReady = ''
        this.noFail = ''
        this.noUploading = ''
      },
      videoUploaded(file) {
        console.log(file, 'sss')
        this.dataForm.videoUrl = file
        this.dataForm.videoUrl = file.map(x => ({
          resourceUrl: x.url,
          name: x.name,
          type: x.type === 'image' ? 1 : x.type === 'video' ? 2 : x.type === 'file' ? 3 : 4
        }))
      },
      fileUploaded(file) {
        this.dataForm.fileUrl = file
        this.dataForm.fileUrl = file.map(x => ({
          resourceUrl: x.url,
          name: x.name,
          type: x.type === 'image' ? 1 : x.type === 'video' ? 2 : x.type === 'file' ? 3 : 4
        }))
      },
      imageUploaded(file) {
        console.log(file)
        // this.img = file
        this.dataForm.imgUrl = file.map(x => ({
          resourceUrl: x.url,
          name: x.name,
          type: x.type === 'image' ? 1 : x.type === 'video' ? 2 : x.type === 'file' ? 3 : 4
        }))
      },
      async wellOk() {
        let arr = []
        arr = arr.concat(this.dataForm.imgUrl, this.dataForm.videoUrl, this.dataForm.fileUrl)
        console.log(arr)
        if (arr !== []) {
          let res = await this.$http.post('/train-admin/course/addIFVCourseResource', {
            courseId: this.id,
            resourcesJson: JSON.stringify(arr)
          })

          if (res.code === 200) {
            this.setUploadAll(arr)
            this.$emit('refreshDataList')
            this.uploadAllDialogVisible = false
          }
        }
      },
      submitUpload() {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        this.$refs.upload.submit()
      },
      handleSuccess() {
        this.noReady = this.dataTable.filter(x => x.status !== 'ready')
        this.noUploading = this.dataTable.filter(x => x.status !== 'uploading')
        this.noFail = this.noUploading.filter(x => x.status === 'fail')
        if (this.noUploading.length === this.dataTable.length) {
          this.loading.close()
          if (!this.noFail.length) {
            this.uploadAllDialogVisible = false
            this.setUploadAll(this.dataTable)
          }
        }
      },
      handleError() {
        this.noReady = this.dataTable.filter(x => x.status !== 'ready')
        this.noUploading = this.dataTable.filter(x => x.status !== 'uploading')
        this.noFail = this.noUploading.filter(x => x.status === 'fail')
        if (this.noUploading.length === this.dataTable.length) {
          this.loading.close()
          if (!this.noFail.length) {
            this.uploadAllDialogVisible = false
            this.setUploadAll(this.dataTable)
          }
        }
      },
      handleChange(file) {
        let dataTable = this.dataTable
        if (dataTable.length) {
          let is = dataTable.filter(x => x.uid === file.uid)
          if (is.length) {
            dataTable.forEach((x, index) => {
              if (x.uid === file.uid) dataTable[index] = file
            })
          } else {
            dataTable.push(file)
          }
        } else {
          dataTable.push(file)
        }
        this.dataTable = dataTable
      },
      dataTableDelect(uid) {
        this.dataTable.forEach((x, i) => {
          if (x.uid === uid) {
            this.dataTable.splice(i, 1)
          }
        })
      }
    }
  }
</script>
